<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <title>游戏主页</title>
    <script src="js/jquery-1.9.1.min.js"></script>

    <!-- 引入uploader插件 -->
    <link rel="stylesheet" type="text/css" href="plugins/webuploader.css"/>
    <script type="text/javascript" src="plugins/webuploader.js"></script>

    <!-- 引入jquary-ui插件 -->

    <link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
    <script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>

    <script>
        //页面加载后触发
        $(function () {
            //直接初始化上传控件
            initWebUploader();

            //获取登录的用户凭证
            var nickName = localStorage.getItem("nickname");
            //获取头像
            var header = localStorage.getItem("header");
            //获取用户名
            var username = localStorage.getItem("username");
            //获取用户的欢乐豆数量
            var happyBean = localStorage.getItem("happyBean");

            //判断是否已经登录
            if (username == null) {
                //强制跳转到登录页
                location.href = "index.html";
            }

            //判断是否存在头像
            if (header != "null") {
                //替换掉默认头像
                $("#header").attr("src", "http://localhost:8080/img/getImg?imgName=" + header);
            }

            //设置欢乐豆
            $("#bean_number").html(happyBean);

            //替换昵称
            $("#nickname").html(nickName);
        });

        /**
         * 初始化文件上传插件
         */
        function initWebUploader() {

            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: 'plugins/Uploader.swf',
                // 文件接收服务端。
                server: 'http://localhost:8080/img/uploader',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                //上传图片时，额外携带的数据
                formData: {
                    username: localStorage.getItem("username")
                }
            });

            //设置上传成功的回调
            uploader.on("uploadSuccess", function (file, response) {
                // alert(response._raw);

                //更新本地的localStorage
                localStorage.setItem("header", response._raw);

                //更新头像地址
                $("#header").attr("src", "http://localhost:8080/img/getImg?imgName=" + response._raw);
            });
        }

        /**
         * 注销
         */
        function logout() {
            localStorage.removeItem("nickname");
            localStorage.removeItem("header");
            localStorage.removeItem("username");
            localStorage.removeItem("happyBean");

            //跳转到登录页面
            location.href = "index.html";
        }

        /**
         * iframe跳转到固定的页面
         */
        function show_page(page) {
            $("#iframe").attr("src", page);
        }

        //充值,弹框
        function recharge() {
            $("#mydialog").dialog({
                title: "欢乐豆充值",
                width: 400,
                height: 300,
                // modal: true 有bug
            });

        }

        //进行充值下单
        var orderId = null;

        function goRecharge() {
            //获取当前用户id
            var uid = localStorage.getItem("uid");
            //充值金额
            var money = $("#money").val();
            if (money == null || money.trim() == "") {
                alert("充值金额不能为null");
                return;
            }
            //正则表达式
            var zz = /^[0-9]*.\.?[0-9]{0,2}$/;
            if (!zz.test(money)) {
                alert("金额类型不正确")
                return;
            }
            if (money <= 0) {
                alert("充值金额必须大于0元")
                return;
            }
            //发送ajax
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/order/create",
                data: {
                    uid: uid,
                    money: money
                },
                success: function (data) {
                    orderId = data;
                    //  alert(data)
                    //将弹出框手动关闭
                    $("#mydialog").dialog("close");
                    //弹出一个支付成功
                    $("#paydialog").dialog({
                        title: "支付中",
                        width: 400,
                        height: 300
                    })

                    //打开一个新页签,进行支付宝支付
                    window.open("http://localhost:8080/order/pay?orderid=" + data);
                }
            })
        }

        //查询支付结果
        function payQuery() {
            alert("查询支付结果的订单" + orderId);
            //发送请求给后端，进行订单交易的查询
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/pay/query",
                data: {
                    orderid: orderId
                },
                success: function (data) {
////data > 0  支付成功  最新的欢乐豆数量
                    //data -1 支付还未成功
                    if (data > 0) {
                        //支付成功
                        $("#paydialog").dialog("close");

                        //更新浏览器保存的欢乐豆数量
                        localStorage.setItem("happyBean", data)
                    } else {
                        //支付还未成功
                        alert("交易未成功！")
                    }
                }

            })
        }
    </script>
    <style>
        .body_class {
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
        }

        .left_div {
            width: 18%;
            height: 100%;
            border-right: 1px solid black;
            /* background-color: aqua; */
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .right_div {
            width: 82%;
            height: 100%;
        }

        .header_class {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .update_header_btn {
            margin-left: 20px;
        }

        .nickname_span {
            margin-top: 20px;
        }

        .logout_btn {
            margin-top: 20px;
        }

        .menu_div {
            margin-top: 50px;
            margin-left: 50px;
            display: flex;
            flex-direction: column;
            width: 60%;
            height: 100%;
            justify-content: center;
        }
  .menu_div1 {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            border-top: 3px solid black;
            width: 100%;
            justify-content: center;
        }


        .menu_div button {
            margin-top: 20px;
        }

        .iframe_class {
            width: 100%;
            height: 100%;
            border: 0px;
        }
        .hi{
            background-color: chocolate;
padding-top: 10px;
            padding-bottom: 10px;
        }
    </style>
</head>
<body class="body_class">
<div class="left_div">
    <!-- 头像 -->
    <div style="display: flex; flex-direction: row; align-items: center;">
        <img id="header" class="header_class" src="img/img.png"/>
        <div id="filePicker" class="update_header_btn">更新头像</div>
    </div>

    <!-- 昵称 -->
    <span id="nickname" class="nickname_span">昵称</span>

    <div style="display: flex; flex-direction: row; align-items: center;margin-top: 20px;">
        <span>欢乐豆：<a id="bean_number">xxxx</a></span>
        <button class="update_header_btn" onclick="recharge()">充值</button>
    </div>

    <!-- 注销 -->
    <button onclick="logout()" class="logout_btn">注销</button>
<div class="menu_div1">

</div>
    <!-----菜单区域------>

    <div class="menu_div">
        <button class="hi" style="margin-top: -150px" onclick="create_room_dialog()">创建房间</button>
        <button class="hi"  onclick="show_page('roomlist.html')">加入房间</button>
        <button class="hi"  onclick="show_page('happybeanlist.html')">欢乐豆记录</button>
        <button class="hi"  onclick="show_page('orderlist.html')">订单记录</button>
    </div>

</div>

<div class="right_div">
    <iframe id="iframe" class="iframe_class" src="welcome.html" scrolling="no"></iframe>
</div>
<!--隐藏的div-->
<div id="mydialog" style="display: none">
    弹出框的内容
    <div style="width: 100%;height: 100%;display: flex;
flex-direction: column;justify-content: center;">
        <span>充值金额：<input id="money" placeholder="请输入充值金额"></span>
        <span style="margin-top: 40px;color: red;font-weight: bold">
            *充值一元即可获得100欢乐豆
        </span>

        <button onclick="goRecharge()" style="margin-top: 40px">去充值</button>
    </div>
</div>
<!--支付进行中-->
<div id="paydialog" style="display: none">
    <div style="width: 100%;height: 100%;
                display: flex;
                align-items:center;
              flex-direction: column;
   justify-content: center">

        <span>正在支付.....</span>
        <button onclick="payQuery()" style="margin-top: 40px">支付已完成</button>
    </div>
</div>
<!---->
<div id="room_div" style="display: none">
    <div style="display: flex;flex-direction: column;justify-content: center">
        <div id="info">信息：<textarea id="room_info" cols="18" rows="3"></textarea></div>
        <div id="pass" style="margin-top: 20px"> 密码：<input id="room_password" type="password" placeholder="密码"></div>
        <button onclick="create_room()" style="margin-top: 20px">创建房间</button>
    </div>

</div>
<!--房间相关的js-->
<script>
    function create_room_dialog() {
        //判断欢乐豆数量
        var  happyBean=localStorage.getItem("happyBean");
        if(happyBean < 1000){
            alert("欢乐豆不足，请充值!");
            return;
        }


        $("#room_div").dialog({
            title: "创建房间",
            height: 300,
            weight: 400
        })
    }

    /*创建房间*/
    function create_room() {
        var info = $("#room_info").val();
        var pass = $("#room_password").val();
        //关闭弹框
        $("#room_div").dialog("close")
        //打开新页签，进行游戏对局
        window.open("game.html?action=1&info=" + info + "&pass=" + pass);
    }
</script>
</body>
</html>
